<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>预览PDF</title>
    <script src="../lodash-demos/lodash.min.js"></script>
    <!-- <script src="../helpers/bing.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>

    <style>
    
      .pdf-page {
        overflow: visible !important; /* 允许内容超出容器 */
      }
    </style>
  </head>
  <body>
    <h1>PDF.js Viewer Example</h1>
    <canvas id="pdf-canvas"></canvas>
    <script>
      // 确保 PDF.js 核心库加载完毕
      window.onload = function () {
        // 设置 PDF.js worker URL
        if (pdfjsLib && pdfjsLib.GlobalWorkerOptions) {
          pdfjsLib.GlobalWorkerOptions.workerSrc =
            "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js";
        }

        // 你的 PDF 文件的 URL
        // var url =
        //   "https://fhnpxw.peixunyun.cn/8aeddfa1c19a413982688807943a1265.pdf";

        var url =
          "https://fhnpxw.peixunyun.cn/2803ef069ae74de99f5ad579b094f2d0.pdf";

        // 使用 PDF.js 渲染 PDF
        var loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(
          function (pdf) {
            console.log("PDF loaded");

            // 获取第一页
            pdf.getPage(1).then(function (page) {
              console.log("Page loaded");

              var scale = 1.5; // 渲染比例
              var viewport = page.getViewport({ scale: scale });

              // 准备 canvas 使用 PDF 页面尺寸
              var canvas = document.getElementById("pdf-canvas");
              var context = canvas.getContext("2d");
              canvas.height = viewport.height;
              canvas.width = viewport.width;

              // 将 PDF 页面渲染到 canvas 上下文中
              var renderContext = {
                canvasContext: context,
                viewport: viewport,
              };
              var renderTask = page.render(renderContext);
              renderTask.promise.then(function () {
                console.log("Page rendered");
              });
            });
          },
          function (reason) {
            // PDF 加载错误
            console.error(reason);
          }
        );
      };
    </script>
  </body>
</html>
